<template>
  <div class="login_container">
    <div class="userInfo">
      <div class="title">
         {{ loginType ? "登 录" : " 注 册" }}
      </div>
      <div class="tips">请填写以下信息</div>
      <div class="form">
        <van-cell-group>
          <van-form v-if="loginType">
            <van-field v-model="username" name="用户名" label="用户名" placeholder="请输入用户名"
              :rules="[{ required: true, message: '请填写用户名' }]" />
            <van-field v-model="password" type="password" name="密码" label="密码" placeholder="请输入密码"
              :rules="[{ required: true, message: '请填写密码' }]" />
          </van-form>
          <van-form v-else>
            <van-field v-model="username" name="用户名" label="用户名" placeholder="请输入用户名"
              :rules="[{ required: true, message: '请填写用户名' }]" />
            <van-field v-model="password" type="password" name="密码" label="密码" placeholder="请输入密码"
              :rules="[{ required: true, message: '请填写密码' }]" />
            <van-field v-model="ConfirmPassword" type="password" name="密码" label="确认密码" placeholder="请再次输入密码"
              :rules="[{ required: true, message: '请填写密码' }]" />
          </van-form>
        </van-cell-group>
        <div style="width: 100%; margin: 20px auto 10px auto;">
          <van-button style="background-color: #00C89B; width: 100%;border-radius: 10px;color: #fff;" @click="login"> {{
            loginType ? "登录" : "注册" }}</van-button>
        </div>
        <div class="register" @click="goRegister">
          {{ loginType ? "点我注册" : "点我登录" }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { setUserInfo } from '@/config/storage'
import { Toast } from 'vant'
import { login, register } from '@/api'
export default {
  name: 'LoginIndex',
  components: {},
  props: {},
  data() {
    return {
      username: '',
      password: '',
      ConfirmPassword: '',
      loginType: true
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {
    goRegister() {
      this.loginType = !this.loginType
    },
    async login() {
      if (this.loginType) {
        if (this.username === '' || this.password === '') {
          return Toast.fail('请填写用户名或密码!')
        }
        try {
          const res = await login({ username: this.username, password: this.password })
          if (res.code == 200) {
            Toast.success(res.msg)
            this.$store.commit('user/SET_USERINFO', res.data)
            setUserInfo(res.data)
            this.$router.push({ path: '/' })
          } else {
            Toast.fail(res.msg)
          }
        } catch (error) {
          console.log(error)
        }
      } else {
        if (this.username === '' || this.password === '' || this.password !== this.ConfirmPassword) {
          return Toast.fail('请检查您的用户名或密码!')
        }
        try {
          const res = await register({ username: this.username, password: this.password })
          if (res.code == 200) {
            Toast.success(res.msg)
            this.username = res.data.username
            this.password = res.data.password
            this.loginType = true
          } else {
            Toast.fail(res.msg)
          }
        } catch (error) {
          console.log(error)
        }
      }
    }
  }
}
</script>
<style scoped lang='less'>
.login_container {
  height: calc(100vh - 240px);
  background-color: #f5f5f5;
  padding: 120px 10px;

  .userInfo {

    .title {
      font-size: 32px;
      font-weight: 700;
      margin-left: 10px;
    }

    .tips {
      margin-top: 14px;
      font-size: 14px;
      margin-left: 10px;
    }

    .form {
      margin-top: 40px;
    }

    .register {
      color: #00C89B;
      float: right;
      font-size: 14px;
      margin-right: 10px;
    }
  }
}

.van-cell {
  padding: 12px 20px;
}
</style>
